<cc:page type="normal" style="customize" showSidebar="false" showHeader="true" />
<cc>
CCService cs = new CCService(userInfo);	
List<CCObject> yh = cs.cquery("ccuser","id='" + userInfo.getUserId() + "'");
String profile = yh.get(0).get("profileccname")!=null? yh.get(0).get("profileccname").toString():""; 

String zsxmsql ="select b.id value,b.name text  from (select distinct sszsxm from zskhxx where is_deleted='0' and ownerid='" + userInfo.getUserId() + "') a left join (select id,name from zsxm ) b on a.sszsxm = b.id ";

List<CCObject> ncxmList = cs.cquery("zskhxx", "ownerid ='"+ userInfo.getUserId() +"' ");
List<CCObject> ncxmList1 = cs.cquery("zskhxx", "ownerid ='"+ userInfo.getUserId() +"' limit 0,10");
net.sf.json.JSONArray js = net.sf.json.JSONArray.fromObject(ncxmList1);
</cc>
<!--<cc:outprint>js</cc:outprint>-->
<script type="text/javascript" src="/staticResource.action?m=getResource&resourceId=1604368626374MCniNYKC"></script>
<script type="text/javascript">
var now = getNow();
watermark({"watermark_txt":"<cc:outprint>userInfo.getRealName()</cc:outprint>"+now});
</script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!-- 
<link rel="stylesheet" href="resource/element-ui/lib/theme-chalk/index.css">

<script src="resource/js/vue2.js"></script>

<script src="resource/element-ui/lib/index.js"></script>
-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
<style>
  .el-select {
    width: 180px;
  }
  .el-form-item {
    margin-bottom: 0px;
  }
.el-input {
    max-width: 180px;
    /*height:26px;*/
}

.el-form-item__label {
    /*line-height: 32px;*/
    font-size:12px;
}

input[type="text"] {
    /*height: 26px;*/
}

.el-input__icon {
    line-height: 0px;
}
.el-input--suffix .el-input__inner {
    padding-right: 0px;
}

.tbClass td{
    padding: 3px 0px; !important
}
.tbClass th{
    padding: 3px 0px; !important
}
</style>
</head>
<body>
    <div id="app">
        <br/>
        <div style="text-align: center; font-size: 25px; font-weight: bold;">招商客户</div>
        <br/>
        <div class="filter">
        </div>
<!-- 
根据人员客户情况，列出的有客户的链接地址

<div>我有客户的项目：
<cc>
 List<CCObject> khxm = cs.cqlQuery("zskhxx",zsxmsql);
 for(CCObject xm : khxm )
 {
</cc>
<el-link type="primary" href="/controller.action?name=zsgwkhck&xm=<cc:outprint>xm.get("value")</cc:outprint>"><cc:outprint>xm.get("text")</cc:outprint></el-link>
<cc>
 }
</cc><br>
</div>
-->
<div>
    <div v-show="showQuery" style="margin-left:10px">
    <el-row >
      <el-col :span="6">
        <el-form label-position="left" label-width="80px">
          <el-form-item label="客户名称">
            <el-input placeholder="客户名称" v-model="queryInfo.condition.khzm"></el-input>
          </el-form-item>
          <el-form-item label="客户等级">
            <el-select size="small" v-model="queryInfo.condition.khdj" multiple placeholder="请选择">
                <el-option
                v-for="item in options_khjb"
                :key="item.value"
                :label="item.text"
                :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>

        </el-form>
      </el-col>
      <el-col :span="6">
        <el-form label-position="left">
          <el-form-item label="所在撞单组">
            <el-select v-model="queryInfo.condition.sszdfzccname" multiple placeholder="请选择" size="small">
                <el-option
                v-for="item in options_sszdfzccname"
                :key="item.value"
                :label="item.text"
                :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="招商项目">
            <el-select v-model="queryInfo.condition.sszsxmccname" multiple placeholder="请选择" size="small">
                <el-option
                v-for="item in options_sszsxmccname"
                :key="item.value"
                :label="item.text"
                :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6">
        <el-form label-position="left">
          <el-form-item label="最后跟进天数">
            <el-input onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" size="small" v-model="queryInfo.condition.zhgj" ></el-input>
          </el-form-item>
          <el-form-item label="所在分区">
            <el-select v-model="queryInfo.condition.zsfqccname" multiple placeholder="请选择" size="small">
                <el-option
                v-for="item in options_zsfqccname"
                :key="item.value"
                :label="item.text"
                :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6">
        <el-form label-position="left">
          <el-form-item label="最后来访天数">
            <el-input onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" size="small" v-model="queryInfo.condition.zhlfts" ></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
    <el-col :span="12">
        <el-form label-position="left">
            <el-form-item label="创建日期">
                <el-date-picker size="small" v-model="queryInfo.condition.createdate" type="daterange"
                    range-separator="至" start-placeholder="开始日期" unlink-panels end-placeholder="结束日期"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    align="right">
                </el-date-picker>
            </el-form-item>
        </el-form>
    </el-col>
    <el-col :span="12">
        <el-form label-position="left">
            <el-form-item label="最后一次跟进日期">
                <el-date-picker size="small" v-model="queryInfo.condition.zhycgjrq" type="daterange"
                    range-separator="至" start-placeholder="开始日期" unlink-panels end-placeholder="结束日期"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    align="right">
                </el-date-picker>
            </el-form-item>
        </el-form>
    </el-col>
    </el-row>
    <el-row>
    <el-col :span="12">
        <el-form label-position="left">
            <el-form-item label="最后修改时间">
                <el-date-picker size="small" v-model="queryInfo.condition.zhxgsj" type="daterange"
                    range-separator="至" start-placeholder="开始日期" unlink-panels end-placeholder="结束日期"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    align="right">
                </el-date-picker>
            </el-form-item>
        </el-form>
    </el-col>
    <el-col :span="12">
        <el-form label-position="left">
            <el-form-item label="最后来访日期">
                <el-date-picker size="small" v-model="queryInfo.condition.zhlf" type="daterange"
                    range-separator="至" start-placeholder="开始日期" unlink-panels end-placeholder="结束日期"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    align="right">
                </el-date-picker>
            </el-form-item>
        </el-form>
    </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form label-position="left">
          <el-form-item label="一级分类">
            <el-select size="small" v-model="queryInfo.condition.lyfl" placeholder="请选择" @change="((value)=>{getOptFJFL('ejfl', value)})">
                <el-option
                v-for="item in options_lyfl"
                :key="item.value"
                :label="item.text"
                :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6">
        <el-form label-position="left">
          <el-form-item label="二级分类">
            <el-select size="small" v-model="queryInfo.condition.ejfl" placeholder="请选择" @change="((value)=>{getOptFJFL('khlyqd', value)})">
                <el-option
                v-for="item in options_ejfl"
                :key="item.value"
                :label="item.text"
                :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6">
        <el-form label-position="left">
          <el-form-item label="客户引流渠道">
            <el-select size="small" v-model="queryInfo.condition.khlyqd" multiple placeholder="请选择">
                <el-option
                v-for="item in options_khlyqd"
                :key="item.value"
                :label="item.text"
                :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6">
        <el-form>
          <el-form-item label="">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="obtainCustomer(true)">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
</div>
</div>
    <el-divider>
      <el-link type="primary" :icon="queryIcon" @click="changeQueryShow()">{{queryText}}</el-link>
    </el-divider>

        <div class="customTable">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[2,10,50,100,200]"
              :background=true
              :page-size="queryInfo.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="queryInfo.total">
            </el-pagination>
            <el-table class="tbClass" :data="tableData" stripe style="width: 100%" height="80vh" border  @row-dblclick="showcust" 
v-loading="loading" >
                <el-table-column prop="xh" label="序号"  fixed  type="index"  ></el-table-column>
                <el-table-column prop="khzm" fixed sortable  label="客户名称" width="200"></el-table-column>
                <el-table-column prop="khdj" sortable label="客户等级" width="120"></el-table-column>
                <el-table-column prop="sszsxmccname"  sortable label="招商项目" width="300" ></el-table-column>
                <el-table-column prop="sszdfzccname" label="所在撞单组" width="100"></el-table-column>
                <el-table-column prop="zsfqccname" label="所在分区" width="100"></el-table-column>
                <el-table-column prop="createdate" sortable  label="创建日期" width="180"></el-table-column>
                <el-table-column prop="zhycgjrq"  sortable  label="最后一次跟进日期" width="150"></el-table-column>
                <el-table-column prop="zhxgsj" sortable  label="最后修改时间" width="150"></el-table-column>
                <el-table-column prop="zhgj" sortable  label="最后跟进天数" width="150"></el-table-column>
                <el-table-column prop="zhlf" sortable  label="最后来访日期" width="150"></el-table-column>
                <el-table-column prop="zhlfts" sortable  label="最后来访天数" width="150"></el-table-column>
                <el-table-column prop="id" label="记录ID" width="150" v-if="show"></el-table-column>
                <el-table-column fixed="right" label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button type="text"  @click="handleClick(scope.row)">编辑</el-button>    
                    <el-button type="text" @click="GzClick(scope.row)">跟进</el-button>    
                    <el-button type="text"  @click="LfClick(scope.row)">来拜访</el-button>
                  </template>
                </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[2,10,50,100,200]"
              :background=true
              :page-size="queryInfo.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="queryInfo.total">
            </el-pagination>
        </div>
<!--<el-drawer
  title="我是标题"
  :visible="searchShow"
  direction="ltr">
  <span>我来啦!</span>
</el-drawer>
    </div> -->
    <script>

        // model fast function
        (function (_w) {
            function QueryCondition() {
                this.khzm = '';
                this.khdj = [];
                this.sszsxmccname = [];
                this.sszdfzccname = [];
                this.zsfqccname = [];
                this.createdate = '';
                this.zhycgjrq = '';
                this.zhxgsj = '';
                this.zhgj = 0;
                this.zhlf = '';
                this.zhlfts = 0;
                this.lyfl = '';
                this.ejfl = '';
                this.khlyqd = [];
            }
            QueryCondition.prototype.getValue = function (val) {
                console.log(this[val])
            };
            _w.model = {};
            _w.model.QC = new QueryCondition();
        })(window);

        // vue new instance
        new Vue({
            el: '#app',
            data() {
                return {
                searchShow: false,
                loading: false,
                    show:false,
                    tableData: <cc:outprint>js</cc:outprint>,
                    queryInfo:{
                        query:'',
                        pagenum: 1,
                        pagesize: 10,
                        total: <cc:outprint>ncxmList.size()</cc:outprint>,
                        condition: window.model.QC
                    },
                    options_khjb: [{
                        value: 'O',
                        text: 'O'
                    }, {
                        value: 'A',
                        text: 'A'
                    }, {
                        value: 'B',
                        text: 'B'
                    }, {
                        value: 'C',
                        text: 'C'
                    }, {
                        value: 'D',
                        text: 'D'
                    }, {
                        value: '公海',
                        text: '公海'
                    }],
                    options_sszsxmccname: [],
                    options_sszdfzccname: [],
                    options_zsfqccname: [],
                    options_lyfl: [],
                    options_ejfl: [],
                    options_khlyqd: [],
                    zsxm: '',
                    khjb: '',
                    kssj: '',
                    jssj: '',
                    zhgjts: '',
                    zhgjtsa: '',
                    id: '',
                    ownerid: '<cc:outprint>userInfo.getUserId()</cc:outprint>',
                    pickerOptions: {
                        disabledDate(time) {
                            return time.getTime() > Date.now();
                        }
                    },
                   showQuery: false,
                   queryText: '展开',
                   queryIcon: 'el-icon-arrow-down',

                }
            },
            mounted() {
              // 获取招商项目
              this.getOpt('sszsxmccname');
              this.getOpt('sszdfzccname');
              this.getOpt('zsfqccname');
              this.getOpt('lyfl');
            },
            methods: {
                getOpt(key) {
                    let that = this;
                    axios.post("hqzskhcxtj.jsp?key=" + key)
                        .then(function (response) {
                          switch(key) {
                            case 'sszsxmccname':
                              that.options_sszsxmccname = that.remove_null(response.data);
                            break;
                            case 'sszdfzccname':
                              that.options_sszdfzccname = that.remove_null(response.data);
                            break;
                            case 'zsfqccname':
                              that.options_zsfqccname = that.remove_null(response.data);
                            break;
                            case 'lyfl':
                              that.options_lyfl = that.remove_null(response.data);
                            break;
                            default:
                            break;
                          }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                getOptFJFL(key, parent_id) {
                    let that = this;
                    if (key === "ejfl") {
                      this.options_ejfl = [];
                      this.options_khlyqd  = [];
                      this.queryInfo.condition.ejfl = '';
                      this.queryInfo.condition.khlyqd = [];
                    }
                    if (key === "khlyqd") {
                      this.options_khlyqd  = [];
                      this.queryInfo.condition.khlyqd = [];
                    }
                    axios.post("hqzskhcxtj.jsp?key=" + key + "&fjfl=" + parent_id)
                        .then(function (response) {
                          switch(key) {
                            case 'ejfl':
                              that.options_ejfl = that.remove_null(response.data);
                            break;
                            case 'khlyqd':
                              that.options_khlyqd = that.remove_null(response.data);
                            break;
                            default:
                            break;
                          }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                changeQueryShow() {
                    this.showQuery = !this.showQuery;
                    if (this.showQuery) {
                        this.queryText = '收起'
                        this.queryIcon = 'el-icon-arrow-up'
                    } else {
                        this.queryText = '展开'
                        this.queryIcon = 'el-icon-arrow-down'
                    }
                    },
                obtainCustomer(reset) {
                    let that = this;
                    this.loading = true;
                    axios.post(this.getQueryString(reset))
                        .then(function (response) {
                            that.loading = false;
                            that.queryInfo.total = response.data.totalCount;
                            that.tableData = response.data.data;
                        })
                        .catch(function (error) {
                            that.loading = false;
                            console.log(error);
                        });
                },
                getQueryString(reset){
                    if (reset === true) {
                      this.queryInfo.pagesize = 10;
                      this.queryInfo.pagenum = 1
                    }
                  var str = 'hqzskhxx.jsp?mysl=' + this.queryInfo.pagesize + '&djy=' + this.queryInfo.pagenum;
                    if (this.queryInfo.condition.khzm !== '') {
                        str += '&khzm=' + this.queryInfo.condition.khzm
                    }
                    if (this.queryInfo.condition.khdj.length > 0) {
                        str += '&khdj=' + this.queryInfo.condition.khdj
                    }
                    if (this.queryInfo.condition.sszsxmccname.length > 0) {
                        str += '&sszsxmccname=' + this.queryInfo.condition.sszsxmccname
                    }
                    if (this.queryInfo.condition.sszdfzccname.length > 0) {
                        str += '&sszdfzccname=' + this.queryInfo.condition.sszdfzccname
                    }
                    if (this.queryInfo.condition.zsfqccname.length > 0) {
                        str += '&zsfqccname=' + this.queryInfo.condition.zsfqccname
                    }
                    if (this.queryInfo.condition.createdate !== null && this.queryInfo.condition.createdate !== '') {
                        str += '&createdate=' + this.queryInfo.condition.createdate
                    }
                    if (this.queryInfo.condition.zhycgjrq !== null && this.queryInfo.condition.zhycgjrq !== '') {
                        str += '&zhycgjrq=' + this.queryInfo.condition.zhycgjrq
                    }
                    if (this.queryInfo.condition.zhxgsj !== null && this.queryInfo.condition.zhxgsj !== '') {
                        str += '&zhxgsj=' + this.queryInfo.condition.zhxgsj
                    }
                    if (this.queryInfo.condition.zhgj !== 0 && this.queryInfo.condition.zhgj !== '0') {
                        str += '&zhgj=' + this.queryInfo.condition.zhgj
                    }
                    if (this.queryInfo.condition.zhlf != null && this.queryInfo.condition.zhlf !== '') {
                        str += '&zhlf=' + this.queryInfo.condition.zhlf
                    }
                    if (this.queryInfo.condition.zhlfts !== 0 && this.queryInfo.condition.zhlfts !== '0') {
                        str += '&zhlfts=' + this.queryInfo.condition.zhlfts
                    }
                    if (this.queryInfo.condition.khlyqd.length > 0) {
                        str += '&khlyqd=' + this.queryInfo.condition.khlyqd
                    }
                    console.log(str);
                  return str;
                },
                handleClick(row) {
                    window.open('/query.action?id=' + row.id + '&m=edit', '_blank');
                },
                GzClick(row) {
                    window.open('/query.action?m=newpage&obj=a39&ffe202093BD840D80jiw=' + row.name + '&ffe202093BD840D80jiw_lkid=' + row.id, '_blank');
                },
                LfClick(row) {
                    window.open('/query.action?m=newpage&obj=a55&ffe202093F29247TSCv6=' + row.name + '&ffe202093F29247TSCv6_lkid=' + row.id, '_blank');
                },
                showcust(data) {
                    window.open('/query.action?id=' + data.id + '&m=query', '_blank')
                },
                filterxm(value, row) {
                    return row.sszsxm === value;
                },
                filterTag(value, row) {
                    return row.khdj === value;
                },
                handleSizeChange(newSize) {
                    console.log(newSize);
                    this.queryInfo.pagesize = newSize;
                    this.obtainCustomer(false);
                },
                handleCurrentChange(newPage) {
                    console.log(newPage);
                    this.queryInfo.pagenum = newPage;
                    this.obtainCustomer(false);
                },
                select() {
                    let that = this;
                    axios.post('yzyzsgwkhcx.jsp?sszsxm=' + this.zsxm + '&khdj=' + this.khjb + '&kssj=' + this.kssj + '&jssj=' + this.jssj + '&zhgjts=' + this.zhgjts + '&zhgjtsa=' + this.zhgjtsa + '&ownerid=' + this.ownerid)
                        .then(function (response) {
                            that.tableData = response.data

                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                nativeClickUp(e) {
                        e = e.replace(/[^\w]/g, '');
                },
                remove_null(arr) {
                  let new_arr = [];
                  for(let i = 0; i < arr.length; i++) {
                    if (arr[i].value !== null || arr[i].text !== null) {
                      new_arr.push(arr[i]);
                    }
                  }
                  return new_arr;
                }
            }
        })
    </script>

</body>

</html>

